<script setup>
import { onMounted, ref } from 'vue'
const activeIndex = ref('6')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
const logoImg = require('../assets/logo.png')
onMounted(() => {
})

</script>
<template>
  <div>
    <el-container>
      <el-affix :offset="0">
        <el-header class="header">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
          >
            <el-menu-item index="1">
              <el-image :src="logoImg" fit="fill" class="logo"></el-image>
              <span>天下游旅游管理系统</span></el-menu-item>
            <div class="flex-grow"/>
            <el-menu-item index="1">网站公告</el-menu-item>
            <el-menu-item index="5">景点列表</el-menu-item>
            <el-menu-item index="2">注册</el-menu-item>
            <el-menu-item index="3">登录</el-menu-item>
            <el-menu-item index="4">个人中心</el-menu-item>
<!--            <el-sub-menu index="2">-->
<!--              <template #title>我的</template>-->
<!--              <el-menu-item index="2-1">个人中心</el-menu-item>-->
<!--              <el-menu-item index="2-2">登录</el-menu-item>-->
<!--              <el-menu-item index="2-3">注册</el-menu-item>-->
<!--            </el-sub-menu>-->
          </el-menu>
        </el-header>
      </el-affix>
      <el-main>
        <el-row :gutter="5">
          <el-col :span="10">
            <el-card class="card-gg">
              <template #header>
                <div class="card-header">
                  <span>网站公告</span>
                </div>
              </template>
              <el-carousel :interval="2500" height="260px" arrow="always">
                <el-carousel-item>
                  <el-image class="carousel-img"
                            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F21%2Fc5%2Fd7%2F21c5d7af2cbd0fca349b5b2d57679650.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658800287&t=8596fa20cffd5955a7ff576f1c06a73d"
                            fit="fill"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <el-image class="carousel-img"
                            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.netbian.com%2Fuploads%2Fallimg%2F180630%2F111909-15303287494577.jpg&refer=http%3A%2F%2Fpic.netbian.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658800365&t=b0fc3edd6f0553070991937760e4f0e3"
                            fit="fill"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <el-image class="carousel-img"
                            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.bizhishe.com%2Fd%2Ffile%2F2021-01-28%2Febd4b0ffd8efcbdfc8c064f3be716890.jpeg&refer=http%3A%2F%2Fwww.bizhishe.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658800782&t=7c7c6daa4d82accfcc0dc6507b378d2e"
                            fit="fill"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <el-image class="carousel-img"
                            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2019-12-07%2Fcf495c4257a74ef8ff44d70ab798ed81%2Fonline%2F9b4de1c40e7fc230822af45a953630a3.jpg%3Fx-oss-process%3Dstyle%2Fresize_w_720&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658800988&t=b4fca850b6d6e3a7874446f5fcf31d48"
                            fit="fill"
                  />
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
          <el-col :span="14">
            <el-card class="card-weather">
              <template #header>
                <div class="card-header">
                  <span>xxx</span>
                </div>
              </template>
              <el-row>
                <el-col :span="6">
                </el-col>
                <el-col :span="18">

                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        待开发
      </el-footer>
    </el-container>
  </div>
</template>
<style>
.el-menu-item * {
  vertical-align: top !important;
}
.logo{
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

.header {
}

.searBox div{
  margin: 0 5px 0 0 ;
}

.card-weather {
  height: 360px;
}

.card-gg {
  height: 360px;
}

.flex-grow {
  flex-grow: 1;
}

.carousel-img {
  width: 100%;
  height: 100%;
}

</style>
